<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        body{
            position: relative;
        }
         ul{
             width: 1200px;min-width: 600px;
            /*最小宽度  小于600出现滚动条 */
            margin: 0 auto;
            display: flex;justify-content: space-between;
             align-items: center;
             list-style: none;
        }
         .big{
             width: 400px;
             height: 300px;
             position: absolute;
             left: 50px;
             top: 100px;
             display: none;
         }
    </style>
    <script>
        window.onload =function(){
            var imgs= document.querySelectorAll("li img");
            var big=document.querySelector(".big")
            for (let i = 0; i < imgs.length; i++) {
              imgs[i].onmousemove =function(e){
                //   console.log(i+1);
                //  big.src="./a/toplist_a0
                //  (i+1).jpg"  需要闭包 无法计算
                big.src=this.src;//鼠标路径等于现在图片路径
                big.style.top=e.y+5+"px";
                big.style.left=e.x+5+"px";
              }
              imgs[i].onmouseout = function(){
                big.style.display="none";
              }
              imgs[i].onmouseenter = function(){
                big.style.display="block";
              }

                
            }


        }
    </script>
</head>
<body>
    <ul>
        <li><img src="./a/toplist_a01.jpg" alt=""></li>
        <li><img src="./a/toplist_a02.jpg" alt=""></li>
        <li><img src="./a/toplist_a03.jpg" alt=""></li>
        <li><img src="./a/toplist_a04.jpg" alt=""></li>
        <li><img src="./a/toplist_a05.jpg" alt=""></li>
        <li><img src="./a/toplist_a06.jpg" alt=""></li>
        <li><img src="./a/toplist_a07.jpg" alt=""></li>
        <li><img src="./a/toplist_a08.jpg" alt=""></li>
    </ul>
    <img class="big" src="./a/toplist_a01.jpg" alt="">
</body>
</html>